<template>
    <div class="fen">
        <!-- 标题 -->
        <h1 class="title">苗世军</h1>
        <!-- 搜索 -->
        <div class="search">
            <div class="search-item">
                <van-icon name="search" />
                <span>搜索</span>
            </div>
            
        </div>
        <!-- 主体部分 -->
        <div class="main">
            <div class="main-left">
                <SliderBar @emitData="getData"></SliderBar>
            </div>
            <div class="main-right">
                <GoodList :fenleiList="fenleiList"></GoodList>
            </div>
        </div>
    </div>
</template>

<script>
import SliderBar from "../components/fenlei/SliderBar.vue"
import GoodList from "../components/fenlei/GoodList.vue"

export default {
    name: 'FenLei',
    components:{
        SliderBar,
        GoodList
    },
    data() {
        return {
            fenleiList:[]
        };
    },
    methods:{
        getData(v){
            this.fenleiList=v.children
            console.log(v.children)
        }
    }
};
</script>

<style lang="less" scoped>
    .title{
        width:100vw;
        height:50px;
        text-align:center;background:#eb4450;
        color:white;
    }
    .search{
        background:#eb4450;
        height:50px;
        width:100vw;
        padding:10px 0;
        display:flex; align-items:center;
        .search-item{
            width:90vw;
            margin:0px auto;
            text-align:center;line-height:30px;
            color:#999;background:white;border-radius:5px;
        }

    }

    .main{
        width:100vw;
        height:calc(100vh - 100px);
        display:flex;
        .main-left{
            width:100px;
           height:100%;
        }
        .main-right{
            flex:1; height:100%;
             
        }
    }
</style>